<template>
  <div>
    <el-dialog @open="onOpen" @close="onClose" title="选择试题" :visible.sync="dialogVisible">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
          <el-col :span="7">
            <el-form-item label="关键词" prop="kword">
              <el-input
                v-model="formData.kword"
                placeholder="请选择关键词"
                clearable
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标题" prop="title">
              <el-input
                v-model="formData.title"
                placeholder="标题"
                clearable
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="题目难度" prop="hard">
              <el-select
                v-model="formData.hard"
                placeholder="请选择题目难度"
                clearable
                :style="{width: '100%'}"
              >
                <el-option
                  v-for="(item, index) in hardOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <el-table
        :data="tableData"
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        v-loading="dataListLoading"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="expand" >
          <template slot-scope="props" >
            <div v-if="formData.typeId==95"> 
              <h2>题目选项</h2>
              {{props.row.questionMap}}
            </div>


             <div>
              <h2>题目解析</h2>
              {{props.row.analysis}}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="title"
          label="标题"
          width="180"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <!-- <el-image
              style="width: 100px; height: 80px"
              :src="scope.row.logo"
            fit="fill"></el-image>-->

            <div v-html="scope.row.title"></div>
          </template>
        </el-table-column>
        <el-table-column prop="kword" label="关键词" width="180"></el-table-column>
        <el-table-column prop="type" label="类型" width="50" :formatter="formatter"></el-table-column>

         <el-table-column prop="difficultyName" label="难度" width="100" ></el-table-column>
    
        <el-table-column prop="isAnswer" label="正确选项" width="50"></el-table-column>

        <el-table-column
          prop="flag"
          :formatter="isTures"
          label="是否正确"
          width="50"
          v-if="formData.typeId==97"
        ></el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="formData.pageIndex"
          :page-size="formData.pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>

      <div slot="footer">
        <el-button @click="handelConfirms">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      dialogVisible: false,
      formData: {
        kword: undefined,
        title: undefined,
        hard: "",
        typeId: 0,
        pageIndex: 1,
        pageSize: 10,
        kuId: 111,
      },
      dataListLoading: false,
      totalPage: 0,
      tableData: [],
      multipleSelection: [],

      hardOptions: [
        {
          label: "容易",
          value: "Easy",
        },
        {
          label: "一般",
          value: "Middle",
        },
        {
          label: "较难",
          value: "Hard",
        },
      ],
    };
  },
  computed: {},
  watch: {
    formData: {
      handler(newVal) {
        this.search();
      },
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    onOpen() {},
    onClose() {
      this.$refs["elForm"].resetFields();
    },
    handelConfirm() {
      this.dialogVisible = false;
      this.$emit("refreshDataList", this.multipleSelection);
    },
    handelConfirms() {
      this.dialogVisible = false;
    },
    // 每页数
    sizeChangeHandle(val) {
      this.formData.pageSize = val;
      this.formData.pageIndex = 1;
    },
    // 当前页
    currentChangeHandle(val) {
      this.formData.pageIndex = val;
    },
    close() {
      this.$emit("update:visible", false);
    },
    init(id) {
      this.formData.typeId = id;
      this,this.formData.kuId= 117

      this.dialogVisible = true;
    },
    search() {
      this.$http({
        url: this.$http.adornUrl(`/tiku/paper/findQuestion`),
        method: "post",
        data: this.$http.adornData(this.formData),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.tableData = data.data.content;
          this.totalPage = data.data.totalElements;
        } else {
          this.tableData = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    formatter(row, column) {
      return row.type == 95
        ? "选择"
        : row.type == 96
        ? "填空"
        : row.type == 97
        ? "判断"
        : "简答";
    },

  
  },
};
</script>
<style>
</style>
